<template>
  <view class="b-lession" @click="handleClickGotoLessonDetail(lessonId)">
    <view class="lession-image">
      <image class="lession-image--image" :src="lessonPicPath" />
    </view>
    <!-- 课程名称 -->
    <view class="lession-name ui-txt ui-ellipsis">{{lessonName}}</view>
    <view class="lession-extends ui-txt txt-caption ui-flex">
      <view class="lession-extends--time">{{ publishTime | date_format('M月D日') }}</view>
      <view class="lession-extends--num">
        <image class="lession-extends--num-image" src="/static/images/home/renshu.png" alt="人数" />
        <text>{{ clickNum }}</text>
      </view>
    </view>
    <view class="lession-footer ui-flex flex--space-between">
      <text class="lession-price ui-txt txt-primary">{{ lessonPrice | currency_format }}</text>
      <text class="lession-price ui-txt txt-primary">{{ lessonCheapPrice | currency_format }}</text>
    </view>
  </view>
</template>

<script>
import lessonMixins from "./mixins";
export default {
  name: "lessionComponent",
  mixins: [lessonMixins],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
$lession-width: 330upx;
.b-lession {
  display: inline-block;
  width: $lession-width;
  text-align: left;
  .lession-image {
    display: inline-block;
    width: $lession-width;
    height: 200upx;
    margin: 0 0 16rpx;
    .lession-image--image {
      display: inline-block;
      width: $lession-width;
      height: 200upx;
      border-radius: 8upx;
    }
  }

  .lession-extends {
    margin: 16rpx 0 20rpx;
    width: 100%;
    box-sizing: border-box;

    .lession-extends--time {
      margin-right: 40rpx;
    }
    .lession-extends--num {
      color: #aeafc0;
      font-size: 22rpx;
      .lession-extends--num-image {
        width: 18rpx;
        height: 18rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>
